<!-- 付款给商家 -->
<template>
	<view>
		<view class="topBack">

		</view>

		<uni-nav-bar backgroundColor="transparent" :statusBar="true" :border="false" :fixed="true" left-icon="back"
			@clickLeft="$tab.back()" title="支付">
		</uni-nav-bar>

		<view class="status" :style="{
			height:statusbar + 'px'
		}">

		</view>

		<view class="px-20 mt-32 relative z-index-999">
			<view class="px-32 py-32 bg-FFF round-12">
				<view class="flex items-center">
					<view class="text-28 font-700">
						支付货币
					</view>
					<view class="text-24 ml-16 text-gray">
						付款给{{phone}}
					</view>
				</view>

				<view class="mt-48 px-20">
					<u-radio-group v-model="selected" >
						<u-radio activeColor="#FA554E" v-for="(item,index) in currencys" :key="index"
							:label="item.moneyName" :name="item.id"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="px-32 bg-FFF py-48 round-12 mt-48">
				<view class="color-000 text-center">
					收款额度
				</view>
				<view class="mt-16">
					<u--input placeholder="请输入收款额度" border="bottom" type="number" clearable v-model="price"></u--input>
				</view>
			</view>
		</view>

		<view class="box-3 round-12 text-32 text-FFF text-center" @click="confirm">
			提交
		</view>


		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view style="width:650rpx;padding: 48rpx;">
				<view class="text-28 text-center font-700">
					请输入支付密码
				</view>
				<view class="mt-32">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>
				<u-button text="确认" class="mt-28 bg-theme text-FFF" @click="payConfrim"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusbar: uni.getSystemInfoSync().statusBarHeight + 44,
				phone: null,
				currencys: [],
				// #ifdef APP-PLUS ||H5
				selected: 1,
				// #endif
				// #ifdef MP-WEIXIN
				selected: 3,
				// #endif
				pay_password: false,
				payPassword: "",
				price: ""
			};
		},
		onLoad(e) {
			this.phone = e.phone
			this.currencys = [
				// #ifdef APP-PLUS ||H5
				{
					moneyName: '支付宝',
					id: 1,
				},
				// #endif
				{
					moneyName: '微信',
					id: 3,
				}
			]
		},
		methods: {
			async confirm() {
				if (this.price <= 0) {
					this.$modal.msg('请输入正确的支付金额!')
					return
				}

				switch (this.selected) {
					case 1:
					case 3:
						this.payConfrim()
						break
					case 2:
					case 4:
						this.pay_password = true
						break
				}
			},

			payConfrim() {
				this.pay_password = false
				this.$modal.confirm('确认支付吗?').then(async con => {
					if (con) {
						// #ifdef APP-PLUS || H5
						var platform = 0
						// #endif
						// #ifdef MP
						var platform = 1
						// #endif

						const pay = await this.$Api.user.storesStorePay({
							userName: this.phone,
							payment: this.selected,
							amount: this.price,
							payPassword: this.payPassword || '123456',
							isService: 0,
							platform: platform
						})

						console.log(pay, '支付')

						switch (this.selected) {
							case 1:
								this.$pay.Alipay(pay.data).then(res => {
									this.$modal.msg('支付成功!')
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}, 1500)
								})
								break
							case 3:
								this.$pay.WeChatPay(pay).then(res => {
									this.$modal.msg('支付成功!')
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}, 1500)
								})
								break
							case 2:
							case 4:
								this.$modal.msg(pay.msg)
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}, 1500)
								break
						}
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #F8f8f8;
	}
</style>

<style lang="scss">
	.topBack {
		height: 342rpx;
		background: linear-gradient(180deg, #E2FFE7 0%, rgba(226, 255, 231, 0) 100%);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
	}


	/deep/ .u-radio-group {
		display: flex;
		justify-content: space-between;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.box-3 {
		width: 400rpx;
		height: 80rpx;
		background: $theme-color;
		margin: 220rpx auto;
		line-height: 80rpx;
	}

	/deep/ .u-code-input {
		justify-content: space-between;
	}
</style>